<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../JS/data.js" charset="utf-8"></script>
    <meta charset="UTF-8">
    <title>歌瑞森</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <link rel="stylesheet" href="../CSS/fenlei.css">
</head>
<body>
<div class="all">
    <div class="top">
        <div class="img fl"><a href="index.html"><img src="../fenlei/images/jiantou.png" /></a></div>
        <div class="ssk"><span class="tubiao fl"></span><input class="fl" placeholder="笔记本" /></div>
        <div class="sandian fr"><img src="../fenlei/images/sandian.png" /></div>
    </div>

      <div class="cnt clearfix">
        <div class="sub_nav fl" id="leftnav"></div>
        <div class="cat_list fl" id="cat_list"></div>
      </div>
      <div class="bottom">
        <img src="../fenlei/images/1.png" />
        <img src="../fenlei/images/2.png" />
        <img src="../fenlei/images/3.png" />
        <img src="../fenlei/images/4.png" />
        <img src="../fenlei/images/5.png" />
      </div>

<script>
    console.log(data);
    var arrs = data.json.keywordAreas;
    for(var i = 0; i<arrs.length; i ++){
        var a = arrs[i];
        var navLi = document.createElement("div");
        navLi.index = i;
        navLi.onclick = function () {
            loadCatData(this.index);
            clearNavLiClassName();
            this.className = "div_active";
        };
        if(i==0){
            navLi.className = "div_active";
        }
        navLi.innerHTML = a.areaName;
        leftnav.appendChild(navLi);
    }
    function clearNavLiClassName(){
        var divs = leftnav.getElementsByTagName("div");
        for(var i = 0;i<divs.length;i++){
            divs[i].className = "";
        }
    }

    loadCatData(0);

    function loadCatData(num){
        cat_list.innerHTML = "";
        var arrs2 = arrs[num].level1words;
        for(var j = 0;j<arrs2.length;j++){
            var a2 = arrs2[j];
            var navLi = document.createElement("div");
            navLi.innerHTML = a2.keyword;
            navLi.style.fontWeight = "400";
            navLi.style.fontSize = "16px";
            cat_list.appendChild(navLi);

            var smallcatList = document.createElement("div");
            smallcatList.className = "smallcatList clearfix";
            var arrs3 = a2.level2words;
            for(var k = 0;k<arrs3.length;k++){
                var a3 = arrs3[k];

                var catDiv = document.createElement("div");
                catDiv.className = "cat fl";

                catDiv.style.width = "30%";
                var imageDiv = document.createElement("img");
                imageDiv.src = "http:"+a3.imageUrl;
                imageDiv.style.width = "100%";
                var txtDiv = document.createElement("div");
                txtDiv.innerHTML = a3.keyword;
                txtDiv.className = "biaoti";

                txtDiv.onclick = function () {
                    location = 'http://so.m.jd.com/ware/search.action?keyword='+this.innerHTML+'&searchFrom=catgory';
                };
                catDiv.appendChild(imageDiv);
                catDiv.appendChild(txtDiv);
                smallcatList.appendChild(catDiv);
            }
            cat_list.appendChild(smallcatList);
        }
    }
</script>
</body>
</html>